<template>
	<view class="flex-col page">
		<view>
			<view :style="{height:statusBarHeight+'px'}"></view>
			<u-navbar title="充值" bgColor="#F5F5F5" @leftClick="$nav(2)">	
			</u-navbar>
		</view>
		
		
		<view class="input-bg">
			<view @click="selectType" class="flex-row justify-between" style="margin-left: 10rpx;margin-right: 10rpx;margin-bottom: 30rpx;">
				<text>充值类型</text>
				<view class="flex-row items-center justify-center">
					<text>{{select ? select :'请选择'}}</text>
					<u-icon name="arrow-right" size="20"></u-icon>
				</view>
			</view>
			<u-divider></u-divider>
			<view style="margin-left: 10rpx;">金额</view>
			<view style="margin-top: 50rpx;margin-bottom: 50rpx;">
				<u--input
					placeholder="请输入金额"
					prefixIcon="rmb"
					prefixIconStyle="font-size: 30px;color: #000"
					type="digit"
					v-model="value"
					focus="true"
					border="none"
					fontSize="20"
				></u--input>
			</view>
			<u-divider></u-divider>
		</view>
		
		
		
		<view class="bottom-lay">
			<u-button type="success" shape="circle" text="付款" @click="handleConfirm"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:'',
				select:'',
				reType: 0,
				tip:1
			};
		},
		computed:{
			statusBarHeight(){
				return this.$store.state.statusBarHeight + 44
			}
		},
		onLoad(op) {
			this.tip = op.tip
			this.reType = op.type
			this.value = op.number
			if(this.reType == 1){
				this.select = '云豆'
			}else if(this.reType == 2){
				this.select = '生日豆'
			}else if(this.reType == 3){
				this.select = '帮扶豆'
			}
		},
		methods:{
			selectType(){
				let that = this;
				// console.log(that.tip)
				if(that.tip == 2){
					return;
				}
				uni.showActionSheet({
				  itemList: ['云豆','生日豆','帮扶豆'],
				  success: function (res) {
					if(res.tapIndex + 1 == 1){
						that.select = '云豆'
						that.reType = 1
					}else if(res.tapIndex + 1 == 2){
						that.select = '生日豆'
						that.reType = 2
					}else if(res.tapIndex + 1 == 3){
						that.select = '帮扶豆'
						that.reType = 3
					}
				  },
				  fail: function (res) {
				    console.log(res.errMsg);
				  }
				});
			},
			
			handleConfirm(){
				if(!this.select){
					this.$u.toast('请选择充值类型')
					return
				}
				if(!this.value){
					this.$u.toast('请输入充值金额')
					return
				}
				this.$request({
					url:'?c=Pay&a=recharge',
					type:'post',
					data:{
						amount:this.value,
						type:this.reType
					}
				}).then(res =>{
					this.weixinpay(res.data)
				})
			},
			weixinpay(data){
				let that = this;
				uni.requestPayment({
				    provider: 'wxpay',
					timeStamp: data.timeStamp,
					nonceStr: data.nonceStr,
					package: data.package,
					signType: data.signType,
					paySign: data.paySign,
					success: function (res) {
						if (res.errMsg == "requestPayment:ok"){
							uni.showToast({
								title:'支付成功'
							});
							setTimeout(() => {
							   uni.navigateBack();
							}, 1000);
						 }else{
							console.log('支付失败')
							uni.showToast({
								title:'支付失败'
							});
						 }
					},
					fail: function (err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			},
		}
	}
</script>

<style lang="scss">
.page{
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100vh;
}
.input-bg{
	// margin-top: 50rpx;
	background-color: #fff;
	border-top-right-radius: 25rpx;
	border-top-left-radius: 25rpx;
	height: 90vh;
	margin-left: 1rpx;
	margin-right: 1rpx;
	padding: 35rpx;
}
.pay-item{
	background-color: #fff;
	padding: 30rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.bottom-lay{
	position: fixed;
	left: 0;
	bottom: 0;
	height: 100rpx;
	width: 100%;
	padding-left: 50rpx;
	padding-right: 50rpx;
	text-align: center;
	background-color: #fff;
	align-items: center;
}
</style>
